<template>
  <div style="display: inline-block;">
    <el-button style="color: red;" type="text" size="small" @click="dialog = true">{{ getButtonContent() }}</el-button>
    <el-dialog :visible.sync="dialog" :title="title" width="600px" :before-close="cancel" :append-to-body="true">
      <div>
        确认调整该账号的状态？
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;">
        <div>
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button @click="submitHandler" style="margin-left: 10px !important;" :loading="loading" type="primary"
            >确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editEmployee } from '@/api/user'

export default {
  props: {
    selectedData: {
      type: Object,
      required: true
    },
    sup_this: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      loading: false,
      dialog: false,
      title: '提示',
    }
  },
  methods: {
    getButtonContent() {
      if (this.selectedData.status) {
        return '禁用'
      } else {
        return '启用'
      }
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
    },
    submitHandler(){
      this.loading = true

      let params = {
        id: this.selectedData.id,
        status: !this.selectedData.status + 0
      }

      editEmployee(params).then(res => {
        if (res.data) {
          this.resetForm()
          
          this.$notify({
            title: '编辑',
            message: '编辑成功',
            type: 'success',
            duration: 2500
          })

          this.loading = false
          this.sup_this.getEmployeeList()
        } else {
          this.$notify({
            title: '编辑',
            message: err.msg,
            type: 'error',
            duration: 2500
          })
        }
      }).catch(err => {
        this.loading = false
        // 错误的处理
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>